﻿
@{
    Layout = null;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
  

    <script src="~/Scripts/jquery-1.8.3.min.js"></script>
</head>
<body>
    <div>
        <div id='frame' style="position:relative;">
            <video style='position:absolute;top:0px;left:0px;z-index:2;' id="live" width="320" height="240" autoplay></video>
            <canvas style='position:absolute;top:242px;left:0px; z-index:170;' width="320" id="canvasFace" height="240"></canvas>
            <canvas style='position:absolute;top:242px;left:0px; z-index:11;' width="320" id="canvas" height="240"></canvas>
        </div>
    </div>

    <br />
    <a href="http://www.zlofyao.top:8082"  style="margin-left: 500px;">点这里用图片录入你的信息</a>
    <br />
    <br />
    <br />
    <br />
  
    <input type="button" value="截图" style="margin-left: 500px;" id="parse" />
    
    <img id="saveImg" src="" style="display:none" />
    <br />
    <br />
    <input name="Name" id="Name" type="text" placeholder="请输入你的名字" style="height: 30px; width: 100px; margin-left: 500px;" />

    <input type="button" value="提交" id="submit" />
    <script>
     

        function dataURItoBlob(dataURI) {
            var byteString = atob(dataURI.split(',')[1]),
                    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0],
                    ab = new ArrayBuffer(byteString.length),
                       ia = new Uint8Array(ab);
            for (var i = 0; i < byteString.length; i++) {
                ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ab], { type: mimeString });
        }
        $(function () {
            var video = $('#live').get()[0],
            canvas = $('#canvas'),
            ctx = canvas.get()[0].getContext('2d'),
            canvasFace = $('#canvasFace'),
            //canvasFace1 = document.getElementById("canvasFace");
            ctx2 = canvasFace.get()[0].getContext('2d'),
            canSend = true;

            if (navigator.getUserMedia) { // Standard
                navigator.getUserMedia({ "video": true }, function (stream) {
                    video.src = webkitURL.createObjectURL(stream);
                    // video.play();
                    startWS();
                }, errBack);
            } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
                navigator.webkitGetUserMedia({ "video": true }, function (stream) {
                    video.src = window.webkitURL.createObjectURL(stream);
                    // video.play();
                    startWS();
                }, errBack);
            }
            else if (navigator.mozGetUserMedia) { // Firefox-prefixed
                navigator.mozGetUserMedia({ "video": true }, function (stream) {
                    video.src = window.URL.createObjectURL(stream);
                    //video.play();
                    startWS();
                }, errBack);
            };

            function errBack() {
                console.log('err');
            }
         
            var _draw = function (pArr) {
                canvasFace[0].height = canvasFace[0].height;//重设height以清除画布
                ctx2.strokeStyle = "#EEEE00";
                ctx2.fillStyle = 'rgba(0,0,0,0.0)';
                ctx2.lineWidth = 2;

                //设置字体样式
                ctx2.font = "30px Courier New";
                //设置字体填充颜色
                ctx2.fillStyle = "red";
                //ctx2.clearRect(0, 0, 320, 240);
                if (pArr == "[]") {
                    return;
                }

                var obj = $.parseJSON(pArr);
                for (var i = 0, l = obj.length; i < l; i++) {
                   
                    var left = obj[i].X; //左上角x坐标
                    var top = obj[i].Y;//左上角y坐标
                    var width = obj[i].W; //宽
                    var height = obj[i].H;//高
                    var name = obj[i].N;//姓名

                    //画方框
                    ctx2.moveTo(left, top);
                    ctx2.lineTo(left + width, top);
                    ctx2.lineTo(left + width, top + height);
                    ctx2.lineTo(left, top + height);
                    ctx2.lineTo(left, top);
                    ctx2.stroke();

                    //从坐标点(50,50)开始绘制姓名
                    ctx2.fillText(name, left - 30, top - 30);
                }

            };

            var startWS = function () {
                var ws = new WebSocket("ws://119.23.237.231:8082/Handler/GetFacePosition.ashx");
                ws.onopen = function () {
                    console.log('Opened WS!');

                };
                ws.onmessage = function (msg) {
                    _draw(msg.data);
                    canSend = true;

                    //记录每次连接的时间
                    //var timestamp = new Date().getTime();
                    //console.log("end=" + timestamp);
                };
                ws.onclose = function (msg) {
                    console.log('socket close!');
                };
                var timer = setInterval(function () {
                    ctx.drawImage(video, 0, 0, 320, 240);
                    if (ws.readyState == WebSocket.OPEN && canSend) {
                        canSend = false;
                        var data = canvas.get()[0].toDataURL('image/jpeg', 0.3), //把画布转base64 压缩比例0.3 
                        newblob = dataURItoBlob(data);

                        ws.send(newblob);
                        //ws.send("123");
                    }
                }, 60);
            };
        });




        //
        $("#submit").click(function () {
            var img = $("#saveImg").attr("src");
            var name = $("#Name").val();

            if (img == "") {
                alert("请先截取图片");
                return;
            }
            if (name == "") {
                alert("请输入姓名");
                return;
            }

            $.ajax({
                type: "post",
                async: false,
                data: { name: name, img: img },
                url: "/Home/AddFaceInfor",
                success: function (data) {
                    alert(data);
                    //if (data.result) {
                    //    alert("success!");
                    //} else {
                    //    alert(data.msg);
                    //}
                }
            })
        })
        $("#parse").click(function () {
           // ws.close(); //关闭TCP连接
            var src = $('#canvas').get()[0].toDataURL("image/jpeg", 1);
            if (src != "") {
                $("#saveImg").attr("src", src);
                $("#saveImg").show();
            }

        })
    </script>
</body>
</html>


